<template>
  <div class="app-content">
    <el-table v-if="errcode === 0" v-loading="loading" :data="kefuList" class="w-full min-h-400px">
      <el-table-column label="头像" width="100">
        <template #default="scope">
          <el-image v-if="scope.row.avatar" :src="scope.row.avatar" class="w-50px h-50px" :preview-src-list="[scope.row.avatar]" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="客服昵称" />
      <el-table-column label="权限" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.manage_privilege">有权限</el-tag>
          <el-tag
            v-else
            class="cursor-pointer"
            type="danger"
            @click="
              $alert(
                '当前微信客服API接口无权限调用，由于对应的客服账号未授权，请到微信客服后台-通过API管理微信客服帐号-授权给（企业内部/第三方应用）',
                '提示',
                { confirmButtonText: '确定' }
              )
            "
            >无权限</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
      <el-result icon="error" :title="errmsg.title" :sub-title="errmsg.desc">
        <template #extra>
          <el-button type="primary" @click="showErrMsg()">查看</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import clipboard from '@/utils/clipboard'
import { getList } from '@/api/platform/work_wechat/kf_servicer'

defineOptions({
  name: 'KfService'
})

// 响应式数据
const kefuList = ref([])
const errcode = ref(0)
const errmsg = ref({})
const loading = ref(true)

// 方法
const handleClipboard = (text, event) => {
  clipboard(text, event)
}

const fetchList = () => {
  getList()
    .then((res) => {
      kefuList.value = res.data
      loading.value = false
    })
    .catch((res) => {
      errmsg.value = {
        errcode: res.data.errcode,
        title: '微信客服配置有误',
        url: 'https://open.work.weixin.qq.com/devtool/query?e=' + res.data.errcode,
        desc: res.data.errmsg
      }
      errcode.value = res.data.errcode
      loading.value = false
    })
}

const showErrMsg = () => {
  // 新窗口打开
  window.open(errmsg.value.url)
}

// 初始化
onMounted(() => {
  fetchList()
})
</script>

<style scoped></style>
